<template>
  <a-drawer :width="500" :visible="show" :footer="false" @cancel="handleCancel" unmountOnClose>
    <template #title>
      {{data.type}}组件编辑
    </template>
    <div class="setting-content">
      <!-- 子组件属性 -->
      <div class="setting-body">
        <div class="setting-item" v-for="item in data.data" :key="item.id">
          <p class="item-name">{{ item.type }}</p>

          <template v-if="item.type === 'Banners'">
            <draggable
              v-model="item.data"
              :component-data="{
                tag: 'div',
                type: 'transition-group',
                name: !drag ? 'flip-list' : null
              }"
              v-bind="bannerDragOptions"
              :disabled="!shouldShowDragHandle(item.data)"
              @start="drag = true"
              @end="drag = false"
              item-key="id"
            >
              <template #item="{ element: banner }">
                <div
                  class="item-button draggable-item"
                  :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data) }"
                  :key="banner.id"
                >
                  <div class="btn-group">
                    <div
                      v-if="shouldShowDragHandle(item.data)"
                      class="drag-handle"
                    >
                      <icon-drag-arrow class="drag-icon" />
                    </div>
                    <icon-delete class="btn-delete" @click="handleDeleteBanner(item.data, item.id)" />
                  </div>
                  
                  <p class="item-name">{{ banner.type }}</p>
                  <a-input class="mt-2" v-model="banner.title" placeholder="标题" allow-clear />
                  <a-input class="mt-2" v-model="banner.alt" placeholder="图片alt" allow-clear />
                  <a-input class="mt-2" v-model="banner.link" placeholder="链接" allow-clear />

                  <template v-if="banner.type === 'Image'">
                    <img class="item-img" :src="banner.imgSrc" />
                    <div class="mt-2 flex items-center">
                      <a-input v-model="banner.imgSrc" placeholder="请输入图片链接" allow-clear />
                      <Upload v-model="banner.imgSrc" :name="`HeroSlide_${banner.id}`" button-class="fit-content" />
                    </div>
                  </template>
                  <template v-else>
                    <video class="item-img" :src="banner.videoSrc" controls></video>
                    <div class="mt-2 flex items-center">
                      <a-input v-model="banner.videoSrc" placeholder="请输入视频链接" allow-clear />
                      <Upload v-model="banner.videoSrc" :name="`HeroSlide_${banner.id}`" button-class="fit-content" />
                    </div>
                    <img class="item-img" :src="banner.imgSrc" />
                    <div class="mt-2 flex items-center">
                      <a-input v-model="banner.imgSrc" placeholder="视频封面" allow-clear />
                      <Upload v-model="banner.imgSrc" :name="`HeroSlide_${banner.id}`" button-class="fit-content" />
                    </div>
                  </template>
                  <a-checkbox class="mt-2" v-model="banner.isExternal">是否外部链接</a-checkbox>
                </div>
              </template>
            </draggable>
            <a-button-group class="mt-2" type="primary">
              <a-button size="mini" type="outline" @click="handleAddBanner(item.data, 'Image')"><template #icon><icon-plus /></template> 图片 </a-button>
              <a-button size="mini" type="outline" @click="handleAddBanner(item.data, 'Video')"><template #icon><icon-plus /></template> 视频 </a-button>
            </a-button-group>
          </template>
          
          <template v-if="item.type === 'Links'"> 
            <draggable
              v-model="item.data"
              :component-data="{
                tag: 'div',
                type: 'transition-group',
                name: !drag ? 'flip-list' : null
              }"
              v-bind="linkDragOptions"
              :disabled="!shouldShowDragHandle(item.data)"
              @start="drag = true"
              @end="drag = false"
              item-key="id"
            >
              <template #item="{ element: link }">
                <div
                  class="item-button draggable-item"
                  :class="{ 'sortable-disabled': !shouldShowDragHandle(item.data) }"
                  :key="link.id"
                >
                  <div class="btn-group">
                    <div
                      v-if="shouldShowDragHandle(item.data)"
                      class="drag-handle"
                    >
                      <icon-drag-arrow class="drag-icon" />
                    </div>
                    <icon-delete class="btn-delete" @click="handleDeleteLink(item.data, link.id)" />
                  </div>
                  
                  <a-link href="link">{{ link.text }}</a-link>
                  <div class="item-action flex items-center">
                    <a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
                    <a-input v-model="link.url" placeholder="按钮链接" allow-clear />
                  </div>
                  <a-checkbox v-model="link.isExternal">是否外部链接</a-checkbox>
                </div>
              </template>
            </draggable>
            <div class="item-add-btn flex items-center" @click="handleAddLink(item.data)">
              <icon-plus />
              <span class="btn-text">添加链接</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import Upload from '@/common/Upload/index.vue'
import { ref, computed, defineAsyncComponent } from 'vue'
// 动态导入 draggable，避免 SSR 问题
const draggable = defineAsyncComponent(() => import("vuedraggable"));
import { randomString } from '@/utils/common'

// 拖拽相关状态
const drag = ref(false)

// 不同类型的拖拽配置选项
const bannerDragOptions = computed(() => ({
  animation: 200,
  group: 'banners', // banner专用分组
  disabled: false,
  ghostClass: 'ghost',
  handle: ".drag-handle", // 只有拖拽手柄才能触发拖拽
  filter: ".arco-input, .arco-select, .arco-checkbox", // 排除输入框等元素
  preventOnFilter: false, // 允许在被过滤的元素上进行正常交互
}))

const linkDragOptions = computed(() => ({
  animation: 200,
  group: 'links', // 链接专用分组
  disabled: false,
  ghostClass: 'ghost',
  handle: ".drag-handle", // 只有拖拽手柄才能触发拖拽
  filter: ".arco-input, .arco-select, .arco-checkbox", // 排除输入框等元素
  preventOnFilter: false, // 允许在被过滤的元素上进行正常交互
}))

// 检查是否应该显示拖拽图标
const shouldShowDragHandle = (list: any[]) => {
  return list && list.length > 1
}

defineProps({
  show: {
    type: Boolean,
    default: false
  },

  data: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['update:show', 'updateSwiper']);

const handleCancel = () => {
  emit('update:show', false);
}

const handleAddBanner = (list: any[], type: string) => {
  list.push({
    id: randomString(),
    type,
    imgSrc: '',
    title: '',
    alt: '',
    link: '',
    videoSrc: type === 'Video' ? '' : undefined
  })

  emit('updateSwiper')
}

const handleDeleteBanner = (list: any[], id: string) => {
  list.splice(list.findIndex(item => item.id === id), 1)
  emit('updateSwiper')
}

const handleAddLink = (list: any[]) => {
  list.push({
    id: randomString(),
    text: '查看更多',
    url: undefined,
    isExternal: false
  })
}

const handleDeleteLink = (list: any[], id: string) => {
  list.splice(list.findIndex(item => item.id === id), 1)
}
</script>

<style lang="scss" scoped>
.setting-content {
  .setting-header {
    padding-bottom: 12px;

    .header-title {
      width: 120px;
      padding-right: 12px;
      text-align: right;
    }
  }

  .setting-body {
    margin-top: 12px;
    
    .setting-item {
      position: relative;
      padding: 16px 12px;
      background: #f0f2f5;
      border-radius: 8px;
      margin-bottom: 20px;

      .btn-group {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        padding: 4px;

        .btn-delete {
          padding: 4px;
          font-size: 24px;
          cursor: pointer;
        }
      }

      .item-name {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid #fff;
      }

      .item-title {
        padding: 12px 0 8px 0;
        font-size: 14px;
        font-weight: 600;
      }

      .arco-input-wrapper {
        background: #fff;
      }

      .item-button {
        position: relative;
        padding: 12px 8px 4px;
        background: #fff;
        border-radius: 4px;
        margin: 4px 0;
        transition: all 0.3s ease;

        &.draggable-item {          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
          }

          // 当禁用拖拽时，不显示拖拽效果
          &.sortable-disabled {
            cursor: default;

            &:hover {
              box-shadow: none;
              transform: none;
            }
          }
        }

        .arco-input-wrapper {
          background: #f2f3f5;
        }
      }

      // 拖拽相关样式
      .flip-list-move {
        transition: transform 0.5s;
      }

      .no-move {
        transition: transform 0s;
      }

      .ghost {
        opacity: 0.5;
        background: #c8ebfb;
      }

      .list-group {
        min-height: 20px;
      }

      .list-group-item {      }

      .list-group-item i {
        cursor: pointer;
      }

      .item-action {
        padding: 10px 0;

        .action-text {
          width: 150px;
          margin-right: 8px;
        }
      }

      .item-add-btn {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 5px;
        font-size: 11px;
        color: #165dff;
        border-radius: 4px;
        font-weight: 600;
        border: 1px solid #165dff;
        cursor: pointer;
      }

      .item-img {
        margin-top: 12px;
        height: 160px;
      }

      .fit-content {
        width: fit-content;
      }

      .item-img-list {
        .img-list-item {
          margin: 4px 0;
          position: relative;
          padding: 8px;
          border-radius: 4px;
          transition: all 0.3s ease;
          background: #fff;
          border-radius: 4px;

          &.draggable-item {            &:hover {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              transform: translateY(-1px);
            }

            // 当禁用拖拽时，不显示拖拽效果
            &.sortable-disabled {
              cursor: default;

              &:hover {
                box-shadow: none;
                transform: none;
              }
            }
          }

          .arco-input-wrapper {
            background: #f2f3f5;
          }

          .img-drag-handle {
            top: 0 !important;
          }
        }

        .item-img-box {
          margin-right: 12px;
          position: relative;
          width: 133px;
          height: 100px;

          .item-img-dlete {
            position: absolute;
            padding: 8px;
            font-size: 32px;
            top: -16px;
            right: -16px;
            color: red;
            cursor: pointer;
          }
        }

        .small-img {
          margin: 0;
          height: 100px;
          object-fit: cover;
        }

        .item-right {
          padding-top: 24px;
        }
      }
    }
  }

  .drag-handle {
    padding: 4px;
    cursor: grab;
    padding: 4px;
    border-radius: 4px;

    &:hover {
      background-color: #f0f2f5;
    }

    &:active {
      cursor: grabbing;
    }

    .drag-icon {
      font-size: 16px;
      color: #86909c;
    }
  }
}
</style>